<template>
  <div class="categoryContainer">
    <!-- 搜索 -->
    <div class="categoryHeader" @click="toSearch"><div class="search">搜索商品</div></div>
    <!-- 内容区域 -->
    <div class="contentContainer">
      <nav class="leftContainer">
        <ul>
          <!-- 左侧分类列表 -->
          <li
            class="scrollItem"
            :class="{ active: navId == category.id }"
            v-for="category in categoryL1List"
            :key="category.id"
            @click="switchList(category)"
          >
            {{ category.name }}
          </li>
        </ul>
      </nav>
      <!-- 右侧内容 -->
      <div class="rightContainer">
        <div class="rightScroll">
          <div class="contentList">
            <!-- 大广告图 -->
            <img v-if="currentCategory.bannerList" :src="currentCategory.bannerList[0].picUrl" alt="" />
            <div class="contentItem">
              
              <div
                class="topBorder"
                v-for="category in categoryGroupList"
                :key="category.id"
              >
                <div class="title1">{{ category.name }}</div>
                <div class="contentXiao">
                  <div v-for="c1 in category.categoryList" :key="c1.id" @click="toGoodsList(c1)">
                    <img
                      :src="c1.wapBannerUrl"
                      alt=""
                    />
                    <p>{{c1.name}}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <TabBar/>
  </div>
</template>

<script>
import TabBar from "@/components/tabBar";
export default {
  
  name: "Category",
  data() {
    return {
      categoryL1List: [], //左侧分类列表数据
      navId: "", //左侧分类列表id
      categoryGroupList: [], //右侧详细分类列表数据
      currentCategory: {}, //右侧大广告图数据
    };
  },
  methods: {
    // 为你推荐’和分类列表的数据
    async getCategoryList() {
      // 获取时间戳
      let timet = new Date().getTime();
      

      // 发送请求
      const result = await this.$ajax.category.reqRecommend(timet);
      
      if(result.data){
        // 存储分类列表数据
        this.categoryL1List = result.data.categoryL1List;
        // 存储分类列表id
        this.navId = this.categoryL1List[0].id;
        
      }
      
    },
    // 根据分类ID获取分类的列表
    async switchList(category) {

      if (category) {
        this.navId = category.id;
      }
      let timet = new Date().getTime();

      const result = await this.$ajax.category.reqCategoryList(
        timet,
        this.navId
      );
      // console.log(result);
      this.categoryGroupList = result.data.categoryGroupList;
      this.currentCategory = result.data.currentCategory;
      
    },
    // 顶部搜索的方法
    toSearch(){
       this.$router.push('/search')
    },
    // 跳转到商品列表页面
    toGoodsList(c1){
      // 获取点击商品的id
      console.log(c1.id)
      this.$router.push(`/goodsList?navId=${this.navId}&subId=${c1.id}`)
    }
  },
  mounted() {
    // 页面一挂载就获取数据为你推荐’和分类列表的数据
    
    this.getCategoryList();
   
    this.switchList();
  },
  components:{
    TabBar
  }
};
</script>

<style lang="less">
.categoryContainer {
  .categoryHeader {
    width: 375px;
    height: 42px;
    padding-top: 5px;
    background-color: white;
    border-bottom: 1px solid #d9d9d9;
    position: fixed;

    
    .search {
      overflow: hidden;
      width: 90%;
      height: 30px;
      line-height: 30px;
      text-align: center;
      margin: 0 auto;
      border: 1px solid #ededed;
      border-radius: 5px;
      background-color: #eee;
      font-size: 13px;
    }
  }
  .contentContainer {
    display: flex;
    border-top: 1px solid #d9d9d9;
    box-sizing: border-box;
    .leftContainer {
      width: 20%;
      border-right: 1px solid #d9d9d9;
      box-sizing: border-box;
      position: fixed;
      top: 47px;
      left: 0;
      ul {
        height: calc(100vh - 40px);
        .scrollItem {
          font-size: 13px;
          height: 40px;
          line-height: 40px;
          text-align: center;
          position: relative;
          &.active::after {
            position: absolute;
            content: "";
            height: 30px;
            width: 1px;
            background-color: red;
            top: 5px;
            left: 2.5px;
          }
        }
      }
    }
    .rightContainer {
      margin-left: 81px;
      margin-top: 42px;
      width: 80%;
      .rightScroll {
        height: calc(100vh - 1.067rem);
        box-sizing: border-box;
        padding: 0.4rem;
        .contentList {
          display: flex;
          flex-wrap: wrap;
          img {
            width: 6.933rem;
            height: 2.533rem;
            margin: 0.267rem 0;
          }
          .contentItem {
            width: 100%;
            display: flex;
            flex-direction: column;
            .topBorder {
              margin-top: 10px;
              .title1 {
                font-size: 14px;
                font-weight: 700;
                border-bottom: 1px solid #eee;
                line-height: 24px;
              }
              .contentXiao {
                display: flex;
                flex-wrap: wrap;
                div{
                  margin-right: 13px;
                  img {
                    width: 1.92rem;
                    height: 1.92rem;
                  }
                  p {
                    font-size: 0.347rem;
                    text-align: center;
                  }
                }
                
              }
            }
          }
        }
      }
    }
  }
}
</style>